<template>
	<view class="home clearfix">
		<cu-custom bgColor="bg-white justify-end">
			<block slot="content"></block>
			<block slot="right">
				<view class="wp100 px15 flex align-center justify-between">
					<view class="flex align-center search-box px15" @click="pushPage('/pages/goods/search')"><image src="/static/home/seo.png" class="block15"></image><text class="f12 text-info ml10">搜索商品</text></view>
				</view>
			</block>
		</cu-custom>
		<!-- notice -->
		<view class="gundong flex align-center pt15 bg-white">
			<view class="flex align-center justify-between" :style="[{ width: list.length *150 +'rpx' }]">
				<view class="flex flex-direction align-center ml15 gundongwidth" v-for="(item,index) in list" :key="index" @click="choice(item,index)">
					<text class="text-info" :class="{choice:index==storeindex}">{{item.name}}</text>
					<view class="class-choice mt5 bg-red" v-if="index==storeindex"></view>
					<view class="class-choice mt5 bg-white" v-else></view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction pb10 px15">
			<view class="px10 flex flex-direction pt10 pb20 bg-white mt10 radius-5" v-for="(item,index) in store" :key="index" @click="pushPage('/pages/store/index?id='+item.id)">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<image class="block45" :src="item.img"></image>
						<view class="flex flex-direction ml10 block-box">
							<view class="ellipsis text-info ">{{item.name}}</view>
							<view class="mt5 f12 text-info flex align-center">共{{item.goodCount}}件商品</view>
						</view>
					</view>
					<view class="guangguang discenter f12">进店逛逛</view>
				</view>
				<view class="mt10  flex align-center">
					<view v-for="(i,index) in item.goodPics" :key="index" class="wp33" :class="'picindex'+index">
						<image :src="i.pic" class="block105 radius-5" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			storeindex:0,
			list:[],
			store:[],
		}
	},
	onShow() {
		// this.classactive=this.storetype
		this.clearStore()
		this.getData()
	},
	computed:{
		...mapState(['storetype'])
	},
	methods: {
		...mapActions(['setStoretype']),
		async getData() {
			let {data} = await this.$http.post('store.index', {}, {tipConfig: { storeLoading: true } })
			this.list=data
			this.getStore()
		},
		async getStore() {
			if (this.finish) return
			let {
				data:{stores}
			} = await this.$http.post('store.storename', { page: this.page,typeId:this.list[this.storeindex].id },{tipConfig: { storeLoading: true, isSuccessTip: false }})
			this.finish = stores.length < 20
			!this.finish && (this.page += 1)
			this.store = [...this.store, ...stores]
		},
		
		clearStore(){
			this.store=[]
			this.finish=false
			this.page=1
		},
		choice(item,index){
			this.storeindex=index
			this.clearStore()
			this.getStore()
			// this.setStoretype(this.classactive)
			// this.getData()
		},
	}
}
</script>

<style lang="less">
.gundong{
	width: 100%;
	overflow-x: scroll;
}
.guangguang{
	width: 130rpx;
	height: 50rpx;
	border-radius: 60rpx;
	border: 1rpx solid #0ea391;
	color: #0ea391;
}
.gundongwidth{
	width: 150rpx;
}
.choice{
	color: #ea2e0d;
}
.class-choice{
	width: 57rpx;
	height: 9rpx;
}
.block105{
	width: 210rpx;
	height: 210rpx;
}
.block-box{
	width: 400rpx;
}
.search-box {
	width: 690rpx;
	height: 66rpx;
	border-radius: 60rpx;
	background-color: #F6F6F6;
}
.picindex0{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.picindex1{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.picindex2{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
</style>
